<template>
  <div>
    <div class="app-head">
      <div class="app-head-left">体系能力需求仿真系统</div>
      <div class="app-head-right">
        <i class="el-icon-user-solid user-icon"></i>
        <el-dropdown :hide-on-click="true" trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            用户名:{{ user?.username || "--"
            }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="app-main">
      <div class="app-menu">
        <el-menu class="elMenu" :unique-opened="true" :default-active="activeIndex" :default-openeds="activeList"
          ref="elMenu">
          <!-- 递归动态菜单 -->
          <NavMenu :data="menuArr"></NavMenu>
        </el-menu>
      </div>
      <div class="app-content">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import NavMenu from "@/components/NavMenu.vue";
import { userLogout } from "@/api/api";
const dataMenu = [
  {
    name: "作战任务",
    path: "project",
    icon: "project",
    id: "0",
    children: [],
    root: "all",
  },
  // {
  //   name: "装备模型",
  //   icon: "model",
  //   id: "1",
  //   root: "all",
  //   children: [
  //     {
  //       name: "指控",
  //       path: "equip/AllegationView",
  //       icon: "AllegationView",
  //       id: "11",
  //       root: "all",
  //     },
  //     {
  //       name: "平台",
  //       path: "equip/PlatformView",
  //       icon: "PlatformView",
  //       id: "12",
  //       root: "all",
  //     },
  //     {
  //       name: "传感器",
  //       path: "equip/SensorView",
  //       icon: "SensorView",
  //       id: "13",
  //       root: "all",
  //     },
  //     {
  //       name: "武器",
  //       path: "equip/WeaponView",
  //       icon: "WeaponView",
  //       id: "14",
  //       root: "all",
  //     },
  //     {
  //       name: "数据链",
  //       path: "equip/dataLink",
  //       icon: "dataLink",
  //       id: "15",
  //       root: "all",
  //     },
  //   ],
  // },
  {
    name: "装备模型",
    icon: "model",
    id: "1",
    root: "all",
    children: [
      {
        name: "红方",
        icon: "AllegationView",
        id: "11",
        root: "all",
        children: [
          {
            name: "指控",
            path: "equip/red/AllegationView",
            icon: "AllegationView",
            id: "111",
            root: "all",
          },
          {
            name: "平台",
            path: "equip/red/PlatformView",
            icon: "PlatformView",
            id: "112",
            root: "all",
          },
          {
            name: "数据链",
            path: "equip/red/dataLink",
            icon: "dataLink",
            id: "113",
            root: "all",
          },
        ],
      },
      {
        name: "蓝方",
        icon: "PlatformView",
        id: "12",
        root: "all",
        children: [
          {
            name: "平台",
            path: "equip/blue/PlatformView",
            icon: "PlatformView",
            id: "121",
            root: "all",
          },
          {
            name: "数据链",
            path: "equip/blue/dataLink",
            icon: "dataLink",
            id: "122",
            root: "all",
          },
        ],
      },
    ],
  },
  {
    name: "作战能力",
    icon: "Capacity",
    id: "2",
    root: "all",
    children: [
      {
        name: "综合电子对抗能力",
        path: "capacity/CapacityOne",
        icon: "Capacity",
        id: "21",
        root: "all",
      },
      {
        name: "综合组网运用能力",
        path: "capacity/CapacityTwo",
        icon: "Capacity",
        id: "22",
        root: "all",
      },
      {
        name: "战术行动协同能力",
        path: "capacity/CapacityThree",
        icon: "Capacity",
        id: "20",
        root: "all",
      },
      {
        name: "信息处理与分发服务能力",
        path: "capacity/CapacityFour",
        icon: "Capacity",
        id: "23",
        root: "all",
      },
      {
        name: "装备保障能力",
        path: "capacity/CapacityFive",
        icon: "Capacity",
        id: "24",
      },
      {
        name: "态势感知共享能力",
        path: "capacity/CapacitySix",
        icon: "Capacity",
        id: "25",
        root: "all",
      },
      {
        name: "时间基线与导航定位能力",
        path: "capacity/CapacitySeven",
        icon: "Capacity",
        id: "26",
        root: "all",
      },
      {
        name: "传感器协同控制能力",
        path: "capacity/CapacityEight",
        icon: "Capacity",
        id: "27",
        root: "all",
      },
      {
        name: "武器协同控制能力",
        path: "capacity/CapacityNine",
        icon: "Capacity",
        id: "28",
        root: "all",
      },
      {
        name: "指挥引导控制能力",
        path: "capacity/CapacityTen",
        icon: "Capacity",
        id: "29",
        root: "all",
      },
    ],
  },
  {
    name: "能力评估",
    icon: "estimate",
    id: "3",
    root: "all",
    children: [
      {
        name: "综合电子对抗能力",
        path: "estimate/EstimateOne",
        icon: "EstimateOne",
        id: "31",
        root: "all",
      },
      {
        name: "综合组网运用能力",
        path: "estimate/EstimateTwo",
        icon: "EstimateOne",
        id: "32",
        root: "all",
      },
      {
        name: "战术行动协同能力",
        path: "estimate/EstimateThree",
        icon: "EstimateOne",
        id: "30",
        root: "all",
      },
      {
        name: "信息处理与分发服务能力",
        path: "estimate/EstimateFour",
        icon: "EstimateOne",
        id: "33",
        root: "all",
      },
      {
        name: "装备保障能力",
        path: "estimate/EstimateFive",
        icon: "EstimateOne",
        id: "34",
        root: "all",
      },
      {
        name: "态势感知共享能力",
        path: "estimate/EstimateSix",
        icon: "EstimateOne",
        id: "35",
        root: "all",
      },
      {
        name: "时间基线与导航定位能力",
        path: "estimate/EstimateSeven",
        icon: "EstimateOne",
        id: "36",
        root: "all",
      },
      {
        name: "传感器协同控制能力",
        path: "estimate/EstimateEight",
        icon: "EstimateOne",
        id: "37",
        root: "all",
      },
      {
        name: "武器协同控制能力",
        path: "estimate/EstimateNine",
        icon: "EstimateOne",
        id: "38",
        root: "all",
      },
      {
        name: "指挥引导控制能力",
        path: "estimate/EstimateTen",
        icon: "EstimateOne",
        id: "39",
        root: "all",
      },
    ],
  },
];
export default {
  components: { NavMenu },
  data() {
    return {
      openeds: ["schemeDesign"],
      activeIndex: "0",
      user: JSON.parse(localStorage.getItem("userInfo")) || {},
      menuArr: [],
      activeList: [],
    };
  },
  methods: {
    async handleCommand() {
      const { data } = await userLogout(this.user.id);
      if (data.code == 200) {
        this.$router.push("/login");
      }
    },
  },
  mounted() {
    const path = this.$route.path.replace("/app/", "");
    if (path) {
      dataMenu.forEach((item, index) => {
        if (item.path == path) {
          this.activeIndex = item.id;
          this.activeList = [index];
        } else {
          item.children.forEach((i) => {
            if (i.path == path) {
              this.activeIndex = i.id;
              this.activeList = [index];
            }
          });
        }
      });
    }
    this.menuArr = [];
    if (this.user.username !== "admin") {
      this.menuArr = JSON.parse(JSON.stringify(dataMenu));
    } else {
      this.menuArr = JSON.parse(JSON.stringify(dataMenu));
      this.menuArr.push({
        name: "用户管理",
        path: "user",
        icon: "user",
        id: "0",
        root: "admin",
        children: [],
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.app-head {
  height: 48px;
  padding: 0px 24px;
  display: flex;
  align-content: center;
  justify-content: space-between;
  background-image: linear-gradient(to right,
      rgb(87, 157, 229),
      rgb(174, 201, 227));
  line-height: 48px;
  color: #fff;
  box-shadow: 0px 12px 8px -12px #bdbdbd;

  &-left {
    font-size: 24px;
    // color: #000;
    font-weight: bold;
  }

  &-right {
    font-size: 16px;
    font-weight: 600;

    // color: #000;
    .user-icon {
      margin-right: 8px;
    }
  }
}

.app-main {
  display: flex;
  justify-content: space-between;
  margin: 24px;
}

.app-menu {
  height: calc(100vh - 96px);
  width: 325px;
  padding: 8px 16px;
  background: #fff;
  margin-right: 24px;
  border-radius: 4px;
  // background: url("../assets/img/bg3.png") no-repeat;
}

.app-content {
  background: #fff;
  width: calc(100vw - 352px);
  text-align: left;
  border-radius: 4px;
  padding: 24px;
  // background: url("../assets/img/bg.png") no-repeat;
}
</style>
